<template>
  <page>
    <view class="total-info">
      <view class="title">
        <text v-show="redType===0">我共发出</text>
        <text v-show="redType===1">我共收到</text>
      </view>
      <view class="price">
        <text>{{info.totalPrice}}</text>
        <text class="min">元</text>
      </view>
      <view class="count">
        <text v-show="redType===0">发出红包总数</text>
        <text v-show="redType===1">收到红包总数</text>
        <text class="num">{{info.count}}</text>
        <text>个</text>
      </view>
      <view class="type-select">
        <view class="select" @click="onCutType">
          <text v-show="redType===0">切换成收到的</text>
          <text v-show="redType===1">切换成发出的</text>
          <text class="arrows"></text>
        </view>
      </view>
      <view class="date-select">
        <view class="select" @click="yearShow = true">
          <text>{{yearList[yearIndex]}}年</text>
          <text class="arrows"></text>
        </view>
      </view>
    </view>
    <view class="record-list">
      <view class="list" v-for="(item,index) in recordList" :key="index">
        <view class="name-date">
          <view class="name">
            <text v-show="redType===0">发出</text>
            <text v-show="redType===1">收到</text>
            <text>{{item.desc}}</text>
          </view>
          <view class="date">
            <text>{{item.create_time}}</text>
          </view>
        </view>
        <view class="price">
          <text>{{item.price}}</text>
        </view>
      </view>
    </view>
    <fui-bottom-popup :show="yearShow" background="transparent" @close="closePopup">
      <view class="fui-custom__wrap">
        <view class="year-list">
          <view class="list" v-for="(item,index) in yearList"
                @click="onSelectYear(index)"
                :key="index">
            <view class="year">
              <text>{{item}}年</text>
            </view>
            <view class="check">
              <fui-icon name="checkround" size="40" color="#999999" v-show="yearIndex !== index"></fui-icon>
              <fui-icon name="checkbox" size="40" color="#ff0000" v-show="yearIndex === index"></fui-icon>
            </view>
          </view>
        </view>
      </view>
    </fui-bottom-popup>
  </page>
</template>

<script setup>

import {ref} from "vue";
import {onLoad, onReachBottom} from "@dcloudio/uni-app";
import {getRedPacketInfo, getRedPacketRecord} from "../../api/wallet";

const yearShow = ref(false);
const yearIndex = ref(0);
const yearList = ref([]);
// 红包类型
const redType = ref(1);
const info = ref({});
const recordList = ref([]);
// 分页
let total = 0;
let pageNum = 1;

onLoad(() =>{
  initDate();
  getData();
  getRecordData();
})

onReachBottom(() =>{
  if(recordList.value.length < total){
    pageNum++;
    getRecordData();
  }
})
function initDate(){
  const date = new Date();
  let year = date.getFullYear();
  // 循环减去年数
  for (let i = 0; i < 5; i++) {
    yearList.value.push(year--);
  }
}
function closePopup(){
  yearShow.value = false;
}

function getData(){
  getRedPacketInfo({
    findYear: yearList.value[yearIndex.value],
    type: redType.value,
  }).then(res =>{
    info.value = res.data;
  })
}

/**
 * 获取红包记录
 */
function getRecordData(){
  getRedPacketRecord({
    findYear: yearList.value[yearIndex.value],
    type: redType.value,
    page: pageNum,
  }).then(res =>{
    if(pageNum === 1){
      recordList.value = res.data.result;
      total = res.data.total;
    }else{
      recordList.value = [...recordList.value,...res.data.result];
    }
  })
}
/**
 * 选择年数
 * @param index
 */
function onSelectYear(index){
  yearIndex.value = index;
  pageNum = 1;
  closePopup();
  getData();
  getRecordData();
}

/**
 * 红包类型切换
 */
function onCutType(){
  redType.value = redType.value === 0 ? 1 : 0;
  pageNum = 1;
  getData();
  getRecordData();
}
</script>

<style scoped lang="scss">
  @import "RedPacketRecord.scss";
</style>
